<template>
     <div class="error_sort" id="error_sort">
        <template v-if="sortList.length <= 5">
                <el-carousel :autoplay="false" arrow="none">
                <el-carousel-item>
                    <main class="error_content">
                        <MyProgress :showNum="item.count" :color="colorList[item.module_id - 1]" :showIndex="item.module_id" v-for="item in sortList"/>
                    </main>
                </el-carousel-item>
            </el-carousel>
         </template>    

         <template v-else>
            <el-carousel :autoplay="false" arrow="none">
            <el-carousel-item>
                <main class="error_content">
                    <MyProgress :showNum="item.count" :color="colorList[item.module_id - 1]" :showIndex="item.module_id" v-for="(item,index) in (sortList.slice(0,5))"/>
                </main>
            </el-carousel-item>
            <el-carousel-item>
                <main class="error_content">
                    <MyProgress :showNum="item.count" :color="colorList[item.module_id - 1]" :showIndex="item.module_id" v-for="(item,index) in sortList.slice(5)" />
                </main>
            </el-carousel-item>
            </el-carousel>
         </template>             
             <div class="side_border"></div>
            </div>
</template>

<script lang="ts" setup> 
     import MyProgress from '../../components/main/progress.vue'
     import {ref,onMounted, onUnmounted,getCurrentInstance} from 'vue'
     import {storeToRefs} from 'pinia'
     let {proxy} = getCurrentInstance()
     import {IhttpReturn} from '@/until/interface'
     import { moduleStore } from '../../store/module'
     let module_store = moduleStore()
     let {module_num} = storeToRefs(module_store)
     let sortList = ref([])
     const colorList: string[] = ["#e74c3c","#e67e22","#f1c40f","#2ecc71","#3498db","#1abc9c","#9b59b6","#fab1a0","#fd79a8","#78e08f"] //颜色列表
     onMounted(() => {
        getSortList()
     })
     // 获取监测点报警排行
     const getSortList = async () => {
        let {data:res}:{res:IhttpReturn} = await proxy.$adminHttp.get("/admin/getSortPoint")
         sortList.value = res.data
         console.log(sortList.value)
     }
</script>


<style lang="less" scoped>
/**报警排行 */
     .error_sort {
     height: 34vh;
     .error_content {
            display: flex;
            flex-direction: column;
            height: 100%;
            padding-bottom: 0!important;
        }
     }
</style>